<!--
 * @Author: wangding
 * @Date: 2020-11-06 15:46:12
 * @LastEditTime: 2021-01-26 19:14:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\alarm\details.vue
-->
<template>
    <div>
        <el-dialog
        :title="$t('alarm.alarmInfo.title')"
        :visible="newVisible"
        @opened="()=>{deviceGetTypeModelBySN()}"
        width="900px"
        @close="()=>{$store.commit('setNewVisible',false)}"
        >
            <div class="detail-main-box-msg">
                <div class="left">
                    <div>
                        <span>{{$t('alarm.errorCode')}}</span>
                        <div>{{detailDataList.errorCode}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.errorType')}}</span>
                        <div>{{detailDataList.errorType}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.errorMessage')}}</span>
                        <div>{{detailDataList.errorMessage}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.gridVoltFaultValue1')}}(V)</span>
                        <div>{{detailDataList.gridVoltFaultValueR}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.gridVoltFaultValue2')}}(V)</span>
                        <div>{{detailDataList.gridVoltFaultValueS}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.gridVoltFaultValue3')}}(V)</span>
                        <div>{{detailDataList.gridVoltFaultValueT}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.temperatureFault')}}(℃)</span>
                        <div>{{detailDataList.temperFaultValue}}</div>
                    </div>
                    <div v-if='statusList.pvCount>0?true:false'>
                        <span>{{$t('alarm.pv1VoltFaultValue')}}(V)</span>
                        <div>{{detailDataList.pv1VoltFaultValue}}</div>
                    </div>
                    <div v-if='statusList.pvCount>0?true:false'>
                        <span>{{$t('alarm.pv2VoltFaultValue')}}(V)</span>
                        <div>{{detailDataList.pv2VoltFaultValue}}</div>
                    </div>

                </div>
                <div class="right">
                    <div v-if='statusList.pvCount>2?true:false'>
                        <span>{{$t('alarm.pv3VoltFaultValue')}}(V)</span>
                        <div>{{detailDataList.pv3VoltFaultValue}}</div>
                    </div>
                    <div v-if='statusList.pvCount>2?true:false'>
                        <span>{{$t('alarm.pv4VoltFaultValue')}}(V)</span>
                        <div>{{detailDataList.pv4VoltFaultValue}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.gridFreqFaultValue1')}}(Hz)</span>
                        <div>{{detailDataList.gridFreqFaultValueR}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.gridFreqFaultValue2')}}(Hz)</span>
                        <div>{{detailDataList.gridFreqFaultValueS}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.gridFreqFaultValue3')}}(Hz)</span>
                        <div>{{detailDataList.gridFreqFaultValuet}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.dciFaultValue1')}}(mA)</span>
                        <div>{{detailDataList.dciFaultValueR}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.dciFaultValue2')}}(mA)</span>
                        <div>{{detailDataList.dciFaultValueS}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.dciFaultValue3')}}(mA)</span>
                        <div>{{detailDataList.dciFaultValueT}}</div>
                    </div>
                    <div>
                        <span>{{$t('alarm.date')}}</span>
                        <div>{{detailDataList.timeStringVal}}</div>
                    </div>
                    <div v-if='detailDataList.deviceType == 7?true:false'>
                        <span>faultType</span>
                        <div>{{detailDataList.faultType}}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        detailDataList:{
            type:Object,
            default:() =>{return {}}
        }
    },
    data() {
        return {
            statusList:{}
        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        // this.deviceGetTypeModelBySN()
    },
    methods: {
        async deviceGetTypeModelBySN(){
            let res = await this.API.deviceGetTypeModelBySN({
                inverterSN:this.detailDataList.inverterSn
            })
            this.statusList = res
        }
    },
};
</script>

<style  lang="less" scoped>
.detail-main-box-msg{
    display: flex;
    font-size:14px;
    .left{
        flex: 1;
        div{
            display: flex;
            padding: 3px 0px;
            align-items: center;
            span{
                flex: 2;
                display:block;
                text-align: right;
            }
            div{
                flex: 3;
                margin-left: 10px;
                border-bottom:1px dotted #ccc;
                height: 27px;
            }
            div:hover{
                border-bottom:1px dotted #FDB814;
            }
        }
    }
    .right{
        flex: 1;
        div{
            display: flex;
            padding: 3px 0px;
            align-items: center;
            span{
                flex: 2;
                display:block;
                text-align: right;
            }
            div{
                flex: 3;
                margin-left: 10px;
                border-bottom:1px dotted #ccc;
                height: 27px;
            }
            div:hover{
                border-bottom:1px dotted #FDB814;
            }
        }
    }
}
</style>
